<template>
    <div class="curdataPage clearfix">
          <!-- <div class="cleft">
                <div class="treenav clearfix">
                      <ul>
                        <li v-for="(item,key) in treenav" :key="key" :class="treenavIndex == key?'on':''" @click="treenavIndex = key">{{item.name}}</li>
                      </ul>
                </div>
                <div class="box1">
                   
                </div>
          </div> -->
          <div class="cright">
                <div class="panel">
                      <div class="panel-head">
                            <tbody>
                                  <tr>
                                      <td width="6%">省份</td>
                                      <td width="4.5%">流域</td>
                                      <td width="8%">断面名称</td>
                                      <td width="6%">监测时间</td>
                                      <td width="4%">水质类别</td>
                                      <td width="4%">水温<br>
                                          <span class="unit">(℃)</span>
                                      </td>
                                      <td width="4%">pH<br>
                                            <span class="unit">(无量纲)</span>
                                      </td>
                                      <td width="4%">溶解氧<br>
                                            <span class="unit">(mg/L)</span>
                                      </td>
                                      <td width="4%">电导率<br>
                                            <span class="unit">(μS/cm)</span>
                                      </td>
                                      <td width="4%">浊度<br>
                                            <span class="unit">(NTU)</span>
                                      </td>
                                      <td width="4%">高锰酸钾盐指数<br>
                                            <span class="unit">(mg/L)</span>
                                      </td>
                                      <td width="4%">氨氮<br>
                                            <span class="unit">(mg/L)</span>
                                      </td>
                                      <td width="4%">总磷<br>
                                            <span class="unit">(mg/L)</span>
                                      </td>
                                      <td width="4%">总氮<br>
                                            <span class="unit">(mg/L)</span>
                                      </td>
                                  </tr>
                            </tbody>
                      </div>
                      <div class="panel-body">
                            <div class="row" ref="rowbox">
                                  <ul ref="panelUl" v-bind:style="{marginTop: marginTop + 'px' }">
                                    <li v-for="(item,key) in tableDataone" :key="key" :class="{abs:key%2 == panrlIndex%2}">
                                        <table>
                                            <tr>
                                                  <td width="6%">{{item.province}}</td>
                                                  <td width="4.5%">{{item.basin}}</td>
                                                  <td width="8%">{{item.sectionName}}</td>
                                                  <td width="6%">{{item.monitime}}</td>
                                                  <td width="4%">{{item.waterlev}}</td>
                                                  <td width="4%">{{item.factor1}}</td>
                                                  <td width="4%">{{item.factor2}}</td>
                                                  <td width="4%">{{item.factor3}}</td>
                                                  <td width="4%">{{item.factor4}}</td>
                                                  <td width="4%">{{item.factor5}}</td>
                                                  <td width="4%">{{item.factor6}}<br></td>
                                                  <td width="4%">{{item.factor7}}</td>
                                                  <td width="4%">{{item.factor8}}</td>
                                                  <td width="4%">{{item.factor9}}</td>
                                            </tr>
                                        </table>
                                    </li>
                                  </ul>
                            </div>
                      </div>
                </div>
          </div>
    </div>
</template>

<script>
export default {
  name: "",
  components:{},
  data() {
    return {
      treenav:[{name:'行政区',id:'1',},{name:'流域',id:'2',},{name:'分类',id:'3',}],//树结构导航
      treenavIndex:0,
      treeConfig: {
        url: "/factorybound/basic/stationTree", //请求树结构数据的链接
        params: {
          structureType: "area",
          token: "72AB3C672E9F4B5292BD775C4D50A566"
        }, //请求树结构数据的参数
        showCheckbox: false
      },
      tableDataone: [],
      tableDatatwo: [
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口1",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口2",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口3",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口4",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口5",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口6",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口7",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口8",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口9",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口10",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口11",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口12",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口13",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口14",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口15",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口16",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口17",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口18",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口19",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口20",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口21",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口22",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口23",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口24",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口25",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口26",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口27",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口28",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口29",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口30",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口31",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口32",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口33",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口34",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口35",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口36",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口37",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口38",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口39",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        },
        {
          province: "湖南省",
          basin: "长江流域",
          sectionName: "三江口40",
          monitime: "02-21 12:00",
          waterlev: "Ⅱ",
          factor1: "10",
          factor2: "5",
          factor3: "5",
          factor4: "5",
          factor5: "5",
          factor6: "5",
          factor7: "5",
          factor8: "5",
          factor9: "5"
        }
      ],
      testurl: "/ruleApi/rule/contacts",
      param: {
        keyword: "",
        pageNumber: 0,
        pageSize: 10,
        token: "E92FBA8069ED4E4F9A3E3E83BDE48058"
      },
      marginTop: 0, //控制表格动画的margin值
      panrlIndex:39,
    };
  },
  created() {
    this.$store.commit('setShowlefttree',false);
    for (let i in this.tableDatatwo) {
      if (i < this.panrlIndex) {
        this.tableDataone.push(this.tableDatatwo[i]);
      }
    }
  },
  mounted() {
    if (this.$refs.panelUl.clientHeight > this.$refs.rowbox.clientHeight) {
      var n = 0;
      setInterval(() => {
        n++;
        if(n >= 30) {
          this.tableDataone.push(this.tableDatatwo[this.panrlIndex]);
          this.tableDataone.shift();
          this.panrlIndex++;
          if(this.panrlIndex == this.tableDatatwo.length){
              this.panrlIndex=0;
          }
          n = 0;
        }
        this.marginTop = -n;
      }, 50);
    }
  }
};
</script>

<style scoped lang="less">
.curdataPage {
  width: 100%;
  height: 100%;
  // .cleft {
  //   width: 200px;
  //   float: left;
  //   height: 100%;
  //   border-right: 1px solid rgb(204, 204, 204);
  //   .treenav{
  //     border: 1px solid rgb(204, 204, 204);
  //     border-top: 0px;
  //     border-right: 0px;
  //       li{
  //         float: left;
  //         box-sizing: border-box;
  //         height: 37px;
  //         border-top: 1px solid rgb(204, 204, 204);
  //         line-height: 37px;
  //         text-align: center;
  //         width: 66px;
  //         cursor: pointer;
  //         border-right: 1px solid rgb(204, 204, 204);
  //         &:last-child{
  //           border-right: 0px;
  //         }
  //       }
  //       .on{
  //         border-top: 3px solid #166bce;
  //       }
  //   }
  // }
  .cright {
    // float: left;
    // width: calc(100% - 201px);
    height: 100%;
    .panel {
      height: 100%;
      .panel-head {
        padding: 5px 0;
        tbody {
          tr {
            td {
              text-align: center;
              font-size: 14px;
              font-weight: 700;
              color: #166bce;
              .unit {
                font-size: 12px;
                font-weight: 400;
              }
            }
          }
        }
      }
      .panel-body {
        height: calc(100% - 48px);
        .row {
          height: 100%;
          overflow: hidden;
          ul {
            margin-top: 0px;
            
            li {
              height: 30px;
              table {
                height: 100%;
                width: 100%;
                td {
                  text-align: center;
                }
              }
              // &:nth-child(odd) {
              //   background: #e9edf4;
              // }
            }
            li.abs{
              background: #e9edf4;
            }
          }
        }
      }
    }
  }
}
</style>
